{% include 'include/head.html' %}
<!-- Page Container START -->
            <div class="page-container">
                <!-- Content Wrapper START -->
                <div class="main-content">
                    <div class="page-header">
                        <h2 class="header-title">调拨单明细表</h2>
                        <div class="header-sub-title">
                            <a id="save"><button class="btn btn-secondary btn-tone m-r-5" >提交</button></a>
                            <a onclick="openBrowse()">
                                <button class="btn btn-secondary btn-tone m-r-5">导入明细单
                                </button>
                            </a>
                            <input type="file" id="file" style="position: absolute;font-size: 100px;right: 0;top: 0;opacity: 0;display: none;"/>
                            <input type="text" id="filename" style="display: none;"/>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <h4>入库单明细表</h4>
                            <div class="m-t-25">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-row">
                                            <div class="form-group m-b-15 col-md-6">

                                                <label>发货方</label>
                                                <select class="select2 form-control" name="state" id="fh">
                                                    {% for item in storeinfo %}
                                                        <option value="{{ item.id }}">{{ item.name }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                            <div class="form-group m-b-15 col-md-6">
                                                <label>收货方</label>
                                                <select class="select2 form-control" name="state" id="sh">
                                                    {% for item in storeinfo %}
                                                        <option value="{{ item.id }}">{{ item.name }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </div>
                                        <div class="m-b-15">
                                            <label>款号</label>
                                            <input type="text" class="form-control" placeholder="款号" id="sn">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="m-t-25">
                                <table id="table" class="table">
                                    <thead>
                                        <tr>
                                            <th>款号</th>
                                            <th>数量</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>款号</th>
                                            <th>数量</th>
                                            <th>总数:<span id="totle">0</span></th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Content Wrapper END -->

                <!-- Footer START -->
                <footer class="footer">
                    <div class="footer-content">
                        <p class="m-b-0">Copyright © 2019 Theme_Nate. All rights reserved.</p>
                        <span>
                            <a href="" class="text-gray m-r-15">Term &amp; Conditions</a>
                            <a href="" class="text-gray">Privacy &amp; Policy</a>
                        </span>
                    </div>
                </footer>
                <!-- Footer END -->

            </div>
            <!-- Page Container END -->

        </div>
    </div>


    <!-- Core Vendors JS -->
    <script src="/static/assets/js/vendors.min.js"></script>

    <!-- page js -->
    <script src="/static/assets/vendors/datatables/jquery.dataTables.min.js"></script>
    <script src="/static/assets/vendors/datatables/dataTables.bootstrap.min.js"></script>
    <script src="/static/assets/js/pages/datatables.js"></script>
    <script src="/static/assets/vendors/select2/select2.min.js"></script>
    <script src="/static/excel/xlsx.core.min.js"></script>
    <script src="/static/assets/js/jquery.tabletojson.min.js"></script>

    <!-- Core JS -->
    <script src="/static/assets/js/app.min.js"></script>
    <script>
        $(document).ready(
            $("#sn").keydown(function(event) {
                if (event.keyCode == 13) {
                    if($("#sn").val()!=""){
                        var ht = "";
                        ht += '<tr>';
                        ht += '<td class="no">'+$("#sn").val()+'</td>';
                        ht += '<td class="num">1</td>';
                        ht += '<td><button class="btn btn-danger btn-xs" onclick="removeSelf(this)">删除</button></td>';
                        ht += '</tr>'
                        $("#table").append(ht);
                        $("#sn").val("");
                        num = parseInt($("#totle").text());
                        $("#totle").text(num+1)
                    }
                }
            })
        );
        function removeSelf(_this){
            var that = $(_this).parent('td').parent('tr');
            that.remove();
        }
    </script>

    <script>
        function openBrowse(){
            $("#file").click();
            var ie = navigator.appName = "Microsoft Internet Explorer"?true:false;
            if(ie)
            {
                {#document.getElementById("fileName").value = document.getElementById("file").value;#}
            }else{
                var a = document.createEvent("MouseEvents");
                a.initEvent("click",true,true);
                document.getElementById("file").dispatchEvent(a);
            }
        }
        $("#save").click(function(){
            $("#save").attr('disabled',true)
            var table = $('#table').tableToJSON(); // Convert the table into a javascript object
            console.log(table);
            var fields = JSON.stringify(table);
            var fh = $('#fh').val();
            var sh = $('#sh').val();

            //alert(fields);
            $.ajax({
            type: "POST",
            url: "",
            data: {data : fields,fh : fh,sh : sh,csrfmiddlewaretoken: '{{ csrf_token }}'},
            dataType: "application/json",
            success:function (message) {
                //alert(message);
                $("#save").attr('disabled',false)
            },
            error:function (message) {
                //alert(message);
                $("#save").attr('disabled',false)
            }
            });
        });
    </script>
    <script type="text/javascript">
        $('#file').change(function(e) {
            var files = e.target.files;
            var fileReader = new FileReader();
            fileReader.onload = function(ev) {
                try {
                    var data = ev.target.result,
                        workbook = XLSX.read(data, {
                            type: 'binary'
                        }), // 以二进制流方式读取得到整份excel表格对象
                        persons = []; // 存储获取到的数据
                } catch (e) {
                    console.log('文件类型不正确');
                    console.log(ev.target.result);
                    return;
                }
                // 表格的表格范围，可用于判断表头是否数量是否正确
                var fromTo = '';
                // 遍历每张表读取
                for (var sheet in workbook.Sheets) {
                    if (workbook.Sheets.hasOwnProperty(sheet)) {
                        fromTo = workbook.Sheets[sheet]['!ref'];
                        console.log(fromTo);
                        persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                        console.log(persons);
                        // break; // 如果只取第一张表，就取消注释这行
                    }
                }
                $('.content').text(JSON.stringify(persons))
                //console.log(JSON.stringify(persons));
                var tablelist = '';
                var totle = 0;
                $.each(persons,function(idx,obj){
                    tablelist+="<tr>";
                    tablelist+="<td>"+obj.款号+"</td><td>"+obj.数量+"</td><td><button class='btn btn-danger btn-xs' onclick='removeSelf(this)'>删除</button></td>";
                    tablelist+="</tr>";
                    totle = totle + obj.数量;
                });
                console.log(tablelist);
                $("#table tbody").empty();
                $("#table tbody").append(tablelist);
                $("#totle").text(totle)
            };
            // 以二进制方式打开文件
            fileReader.readAsBinaryString(files[0]);
        });
    </script>
</body>

</html>